<template>
  <el-container>
    <el-dialog title="会话记录" :visible.sync="centerDialogVisible" width="70%" center>
      <br />
      <el-row>
        <el-col :span="11">
          <el-card class="box-card" style="min-height: 500px;max-height: 500px;overflow-y:auto">
            <div
              v-for="(message, index) in messages"
              :key="index"
              class="message-item"
              :class="message.type"
            >
              <img src="../../assets/default.png" alt="Avatar" class="avatar" />
              <div class="message-content">{{ message.content }}</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="11" :offset="2">
          <el-row>
            <el-col :span="24"></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              客户姓名：
              <el-input v-model="userName" placeholder="请输入内容" style="width: 200px;" disabled></el-input>
            </el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :span="24">
              客户电话：
              <el-input v-model="userPhone" placeholder="请输入内容" style="width: 200px;" disabled></el-input>
            </el-col>
          </el-row>
          <br />
          <br />
          <el-row>
            <el-col :span="24">
              客户所在地：
              <el-input v-model="userAddr" placeholder="请输入内容" style="width: 200px;" disabled></el-input>
            </el-col>
          </el-row>
          <br />
          <br />
          <el-row>
            <el-col :span="24">
              业务类型：
              <el-radio-group v-model="userQueryType2" disabled>
                <el-radio :label="3">投诉</el-radio>
                <el-radio :label="6">咨询</el-radio>
                <el-radio :label="9">办理</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <br />
          <br />
          <el-row>
            <el-col :span="24">
              详情：
              <el-input
                type="textarea"
                :rows="5"
                :cols="6"
                placeholder="请输入内容"
                v-model="textarea"
                disabled
              ></el-input>
            </el-col>
          </el-row>
          <br />
          <br />
        </el-col>
      </el-row>
    </el-dialog>
    <el-main>
      <el-card class="box-card" style="font-size: 12px;">
        <br />
        <br />
        <el-row>
          <el-col :span="6">
            用户名称：
            <el-input
              placeholder="请输入内容"
              v-model="formData.userName"
              clearable
              style="width: 220px;"
            ></el-input>
          </el-col>

          <el-col :span="6">
            用户ID：
            <el-input placeholder="请输入内容" v-model="formData.userId" clearable style="width: 230px;"></el-input>
          </el-col>
          <el-col :span="6">
            手机号码：
            <el-input
              placeholder="请输入内容"
              v-model="formData.userTel"
              clearable
              style="width: 215px;"
            ></el-input>
          </el-col>
          <el-col :span="3" :offset="2">
            <el-button type="primary" @click="clickQuery">查询</el-button>
            <el-button plain>重置</el-button>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-card>
      <br />
      <!-- ===================表格======================= -->
      <el-card class="box-card">
        <el-table :data="tableData" height="580px" border style="width: 100%">
          <el-table-column prop="id" label="会话ID">
            <template slot-scope="scope">
              <b>
                <el-button type="text" @click="queryChat(scope.row)">{{ scope.row.id }}</el-button>
              </b>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="客户姓名"></el-table-column>
          <el-table-column prop="userPhone" label="客户电话"></el-table-column>
          <el-table-column prop="userQueryType" label="会话类型">
            <template #default="{ row }">
              <span :style="{ color: getColor(row.userQueryType
                ) }">
                {{ getStateText(row.userQueryType
                ) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <!-- <el-table-column prop="address" label="客户地址"></el-table-column> -->
        </el-table>
      </el-card>
    </el-main>
    <!-- ===============表格分页============================= -->
    <el-footer style="background-color: #ffffff;">
      <el-card class="box-card">
        <el-row>
          <el-col :span="6" :offset="15">
            <el-pagination
              bcakground
              :page-sizes="[5,10,15,20]"
              :page-size="pageSize"
              :current-page="pageNum"
              layout="total,sizes,prev,pager,next"
              :total="total"
              @next-click="nextPage"
              @prev-click="forwordone"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </el-footer>
  </el-container>
</template>
  
  <script>
export default {
  mounted() {
    window.vue = this;
  },
  data() {
    return {
      messages: [],
      userName: "",
      userPhone: "",
      userAddr: "",
      userDetail: "",
      userQueryType: "",
      userQueryType2: "",
      textarea: "",
      centerDialogVisible: false,
      total: 0,
      pageSize: 5,
      pageNum: 1,
      formData: {
        id: "",
        userName: "",
        userTel: ""
      }
    };
  },
  methods: {
    getStateText(state) {
      switch (state) {
        case 3:
          return "投诉";
        case 6:
          return "咨询";
        case 9:
          return "办理";
      }
    },
    getColor(state) {
      switch (state) {
        case 3:
          return "red";
        case 6:
          return "green";
        case 9:
          return "black";
      }
    },
    queryChat(row) {
      this.centerDialogVisible = true;
      this.$axios.post("api/custom-server/chat/queryChat", row.id).then(res => {
        this.messages = res.data.data.messageDto;
        this.userName = res.data.data.userName;
        this.userPhone = res.data.data.userPhone;
        this.userAddr = res.data.data.userAddr;
        this.textarea = res.data.data.textarea;
        this.userQueryType2 = row.userQueryType;
      });
    },
    openDialog() {
      console.log(this.centerDialogVisible);
    },
    clickQuery() {
      this.pageNum = 1;
      this.queryAllOrder();
    },
    queryAllOrder() {
      //查询方法 pageNum,pageSize
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.formData;
      this.$axios
        .post("api/custom-server/chat/queryHuiHua", params)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
            this.pageNum = res.data.data.pageNum;
            this.pageSize = res.data.data.pageSize;
          }
        });
    },
    lenddetail(val) {},
    onCurrentChange(val) {
      this.pageNum = val;
      this.queryAllOrder();
    },
    onSizeChange(val) {
      //最新的pageSize
      this.pageNum = 1;
      this.pageSize = val;
      this.queryAllOrder();
    },
    forwordone(val) {
      this.pageNum = val;
      this.queryAllOrder();
    },
    nextPage(val) {
      this.pageNum = val;
      this.queryAllOrder();
    },
    navigateToComponentA() {
      this.$router.push("/orderQuery");
    },
    navigateToComponentB() {
      this.$router.push("/logisticsQuery");
    },
    navigateToComponentC() {
      this.$router.push("/afterSaleQuery");
    },
    navigateToComponentD() {
      this.$router.push("/userQuery");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {
    this.queryAllOrder();
  }
};
</script>
  
  <style scoped>
.menu-with-icons.el-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* 去除下划线 */
}
.message-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message-item.sent {
  align-items: flex-end;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.message-content {
  max-width: 70%;
  padding: 10px;
  border-radius: 5px;
  background: #ffffff;
}

.message-item.sent .message-content {
  background: #e1f5fe;
}

.menu-item-with-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.icon-description {
  margin-top: -20px;
  font-size: 10px;
}

.menu-item-with-icon img {
  width: 20px;
  height: auto;
}

.el-header {
  background-color: #ffffff;
}

.el-aside {
  background-color: #f4f4f4;
}

.el-main {
  background-color: #ffffff;
}

.el-footer {
  background-color: #f4f4f4;
}
.label {
  font-weight: normal;
}
.value {
  font-weight: bold;
}
</style>